<template>
    <div class="comment-item">
        <div class="top">
            <img :src="comment.user.avatar_url || defaultImg" alt="sb">
            <div class="name">{{comment.user.nick_name}}</div>
            <van-rate :size="16" :value="comment.score" color="#ffd21e" void-icon="star" void-color="#eee"/>
        </div>
        <div class="content">
           {{ comment.content }}
        </div>
        <div class="time">
            {{ comment.update_time }}
        </div>
    </div>
</template>

<script>
import defaultImg from '@/assets/default-avatar.png'
export default {
  name: 'CommentItem',
  props: {
    comment: {
      type: Object,
      required: false,
      default: () => { return {} }
    }
  },
  data () {
    return {
      defaultImg
    }
  },
  created () {
  }
}
</script>

<style lang="less" scoped>
.comment-item {
    font-size: 16px;
    line-height: 30px;
.top {
    height: 30px;
    display: flex;
    align-items: center;
    margin-top: 20px;
    img {
        width: 20px;
        height: 20px;
        }
    .name {
        margin: 0 10px;
        }
}
.time {
    color: #999;
}
}
</style>
